import React, {Component} from 'react';
import {
    Dimensions,
    Button,
    SafeAreaView,
    StyleSheet, View, Text, Modal, TouchableHighlight
} from 'react-native';
import Toast from 'react-native-root-toast';
import HttpServer from '../../../http/HttpServer';
import HttpApi from '../../../http/api';

class HttpPage extends Component{
    constructor(props) {
        super(props);
        this.state = {
            modalVisible:false,
            msg: ''
        };
    }
    screen = Dimensions.get('screen');
    styles = StyleSheet.create({
        container:{
            height: this.screen.height,
            width: this.screen.width,
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-around'
        },
        centeredView: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            marginTop: 22
        },
        modalView: {
            margin: 20,
            backgroundColor: 'white',
            borderRadius: 20,
            padding: 35,
            alignItems: 'center',
            shadowColor: '#000',
            shadowOffset: {
                width: 0,
                height: 2
            },
            shadowOpacity: 0.25,
            shadowRadius: 3.84,
            elevation: 5
        },
        openButton: {
            backgroundColor: '#F194FF',
            borderRadius: 20,
            padding: 10,
            elevation: 2
        },
        textStyle: {
            color: 'white',
            fontWeight: 'bold',
            textAlign: 'center'
        },
        modalText: {
            marginBottom: 15,
            textAlign: 'center'
        }
    })
    getHttp = ()=>{
        HttpServer.get(HttpApi.test.getUrl).then(res=>{
            Toast.show('请求成功', {
                duration: Toast.durations.LONG, // toast显示时长
                position: Toast.positions.CENTER // toast位置
            });
            this.setMsg(res.data.msg);
        });
    }
    postHttp = ()=>{
        HttpServer.post(HttpApi.test.postUrl).then(res=>{
            Toast.show('请求成功', {
                duration: Toast.durations.LONG, // toast显示时长
                position: Toast.positions.CENTER // toast位置
            });
            this.setMsg(res.data.msg);
        });
    }
    showModal = ()=>{
        this.setModalVisible(true);
    }
    setMsg = (v)=>{
        this.setState({
            msg:v
        });
    }
    setModalVisible = (v)=>{
        this.setState({
            modalVisible:v
        });
    }
    render() {
        return (
            <SafeAreaView style={this.styles.container}>
                <Modal
                    animationType="fade"
                    onRequestClose={() => {
                        this.setModalVisible(false);
                    }}
                    transparent
                    visible={this.state.modalVisible}
                >
                    <View style={this.styles.centeredView}>
                        <View style={this.styles.modalView}>
                            <Text style={this.styles.modalText}>{this.state.msg}</Text>

                            <TouchableHighlight
                                onPress={() => {
                                    this.setModalVisible(!this.state.modalVisible);
                                }}
                                style={{ ...this.styles.openButton, backgroundColor: '#2196F3' }}
                            >
                                <Text style={this.styles.textStyle}>关闭</Text>
                            </TouchableHighlight>
                        </View>
                    </View>
                </Modal>
                <Button
                    color="#841584"
                    onPress={this.getHttp}
                    title="请求get数据"
                />
                <Button
                    color="#841584"
                    onPress={this.postHttp}
                    title="请求post数据"
                />
                <Button
                    color="#841584"
                    onPress={this.showModal}
                    title="获取结果"
                />
            </SafeAreaView>
        );
    }
}
export default HttpPage;
